<template>
  <div class="orderDetail" :class="{'paddBottom':watchOrderType!=1&&watchOrderType!=4}" v-if='orderDetail'>
    <x-header title="订单详情" :left-options="{backText:'',preventGoBack:true}" @click.native='goBack' class='whiteHeader'>
      <a :href="'tel:'+phone" slot='right'>
        <img src="../../assets/image/order/phone.png" class="phone">
      </a>
    </x-header>
    <div class="detail" v-if='orderDetail'>
    	<!-- <div class="orderType">
    		<div class="type firstType" v-if='watchOrderType<1'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/type1-1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text1">下单</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type firstType" v-if='watchOrderType>=1'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/type1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text1">下单</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType<2'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/noActive.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type2-1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text2">付款</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType>=2'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/active.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type2.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text2">付款</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType<3&&orderDetail.FIRST_CLASS!=10007'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/noActive.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type3-1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text3">待服务</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType>=3&&orderDetail.FIRST_CLASS!=10007'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/active.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type3.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text3">待服务</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType<4&&orderDetail.FIRST_CLASS!=10007'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/noActive.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type4-1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text4">已服务</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType>=4&&orderDetail.FIRST_CLASS!=10007'>
    			<div class="typeTop"> 
    				<img src="../../assets/image/order/active.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type4.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text4">已服务</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType<3&&orderDetail.FIRST_CLASS==10007'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/noActive.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type6-1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text3">配送中</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType>=3&&orderDetail.FIRST_CLASS==10007'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/active.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type6.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text3">配送中</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType<4&&orderDetail.FIRST_CLASS==10007'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/noActive.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type4-1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text4">已签收</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType>=4&&orderDetail.FIRST_CLASS==10007'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/active.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type4.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot">
    				<span class="text4">已签收</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType<5'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/noActive.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type5-1.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot text5">
    				<span>交易成功</span>
    				<label></label>
    			</div>
    		</div>
    		<div class="type" v-if='watchOrderType>=5'>
    			<div class="typeTop">
    				<img src="../../assets/image/order/active.png" alt="" class="typeLine" />
    				<img src="../../assets/image/order/type5.png" alt="" class="typeLogo" />
    			</div>
    			<div class="typeBot text5">
    				<span>交易成功</span>
    				<label></label>
    			</div>
    		</div>
    	</div> -->

      <div class="orderType1">

        <div class="inner" v-if='watchOrderType==1'>
            <img src="../../assets/image/order/tp2.png" >下单
        </div>
        <div class="inner" v-if='watchOrderType==2'>
            <img src="../../assets/image/order/tp6.png" >已付款
        </div>
        <div class="inner" v-if='watchOrderType==3&&orderDetail.FIRST_CLASS!=10007'>
            <img src="../../assets/image/order/tp7.png" >待服务
        </div>
        <div class="inner" v-if='watchOrderType==3&&orderDetail.FIRST_CLASS==10007'>
            <img src="../../assets/image/order/tp4.png" >配送中
        </div>
        <div class="inner" v-if='watchOrderType==4&&orderDetail.FIRST_CLASS!=10007'>
            <img src="../../assets/image/order/tp1.png" >已服务
        </div>
        <div class="inner" v-if='watchOrderType==4&&orderDetail.FIRST_CLASS==10007'>
            <img src="../../assets/image/order/tp3.png" >已签收
        </div>
        <div class="inner" v-if='watchOrderType==5'>
            <img src="../../assets/image/order/tp5.png" >交易成功
        </div>
      </div>
    	<div class="address" v-if='orderDetail.ADDRESS'>
    		<p><span>{{orderDetail.CONTACT}}</span><label>{{orderDetail.PHONE}}</label></p>
    		<div class="detailAddress">
    			<img src="../../assets/image/order/address.png" alt="" />
    			<span>{{orderDetail.ADDRESS}}</span>
    		</div>
    	</div>
    	<div class="carMess" v-if='orderDetail.CAR_NUMBER'>
    		<img :src="orderDetail.CAR_BRAND_LOGO" alt="">
    		<div class="carDetailMess">
    			<h1>{{orderDetail.CAR_NUMBER}}</h1>
    			<p>{{orderDetail.CAR_BRAND_NAME.split('_')[1]}} {{orderDetail.CAR_BRAND_NAME.split('_')[2]}}</p>
    		</div>
    	</div>
    	<div class="allShop">
    		<!-- <h1>商品明细</h1> -->
			<div class="shopDetail" v-for='(item,index) in orderDetail.DETAIL_LIST' v-if='orderDetail.FIRST_CLASS!=10007&&orderDetail.FIRST_CLASS!=10008' :class='{borderR:index==0}'>
				<h2>{{item.D_SUBJECT}}</h2>
				<p><span>x{{item.QUANTITY}}</span><label>{{item.sum}}</label></p>
			</div>
			<div class="shopDetail1" v-for='(item,index) in orderDetail.DETAIL_LIST' v-if='orderDetail.FIRST_CLASS==10007||orderDetail.FIRST_CLASS==10008' :class='{borderR:index==0}'>
				<div class="shopDetailLeft">
					<img :src="item.COVER_IMG" alt="" />
				</div>
				<div class="showDetailRight">
					<div class="detailTop">
						<p>{{item.D_SUBJECT}}</p>
						<span>￥{{item.sum}}</span>
					</div>
					<h3>数量：{{item.QUANTITY}}</h3>
				</div>
			</div>
			<div class="noVoucher" v-if='!orderDetail.VOUCHERS_NO'>
				<!-- <h2>总计：<label>￥</label><span>{{Number(orderDetail.TOTAL_PRICE) | filterMoney}}</span>.<em>{{Number(orderDetail.TOTAL_PRICE) | filterMoney1}}</em></h2> -->
        <h2>总计：<label>￥</label><span>{{Number(orderDetail.TOTAL_PRICE) | filterMoney}}.{{Number(orderDetail.TOTAL_PRICE) | filterMoney1}}</span></h2>
			</div>
			<div class="voucherMess" v-if='orderDetail.VOUCHERS_NO'>
				<div class="voucherLogo">
					<img src="../../assets/image/order/voucher.png" alt="" />
					<span>减免金额</span>
				</div>
				<div class="voucherNum">
					<p>商品金额：<label>￥</label><span>{{(Number(orderDetail.TOTAL_PRICE)+Number(orderDetail.VOUCHERS_AMOUNT)) | filterMoney}}</span>.<em>{{(Number(orderDetail.TOTAL_PRICE)+Number(orderDetail.VOUCHERS_AMOUNT)) | filterMoney1}}</em></p>
					<h3>-￥{{orderDetail.VOUCHERS_AMOUNT}}</h3>
					<h2>总计：<label>￥</label><span>{{Number(orderDetail.TOTAL_PRICE) | filterMoney}}</span>.<em>{{Number(orderDetail.TOTAL_PRICE) | filterMoney1}}</em></h2>
				</div>
			</div>
    	</div>
    	<div class="orderMess">
    		<!-- <h1>订单信息</h1> -->
    		<div class="MessDetail">
    			<div class="orderNo items">
    				<h2>订单号：</h2>
    				<p>{{orderDetail.ORDER_NO}}</p>
    			</div>
					<div class="orderSS items" v-if="orderDetail.PAY_WAY==2">
    				<h2>支付方式：</h2>
    				<p>微信支付</p>
    			</div>
					<div class="orderSS items" v-if="orderDetail.PAY_WAY==1">
    				<h2>支付方式：</h2>
    				<p>支付宝支付</p>
    			</div>
    			<div class="orderTime items">
    				<h2>下单时间：</h2>
    				<p>{{orderDetail.CREATE_TIME | filterTimesss}}</p>
    			</div>
    			<div class="orderEnd items">
    				<h2>订单有效期：</h2>
    				<p>{{orderDetail.EXP_DATE | filterTimes}}</p>
    			</div>
    			<div class="orderappiont items" v-if='orderDetail.FIRST_CLASS==10001||orderDetail.FIRST_CLASS==10003'>
    				<h2>预约时间：</h2>
    				<p>{{orderDetail.PREDATE_END | filterTimes }} {{orderDetail.PREDATE_START | filterTime}}-{{orderDetail.PREDATE_END | filterTime}} ></p>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="qrCode">
    	<div class="codeType1" v-if='orderDetail.VERIFY_CODE=="2017618"'>
    		<h1>领奖二维码</h1>
    		<p>{{orderDetail.REMARK}}</p>
    		<div class="codes">
    			<qrcode :value="orderDetail.VERIFY_QRCODE" :size='145' ></qrcode>
    		</div>
    	</div>
    	<div class="codeType1" v-if='(orderDetail.FIRST_CLASS==10001||orderDetail.FIRST_CLASS==10003)&&(orderDetail.VERIFY_CODE!="2017618"&&orderDetail.VERIFY_QRCODE!="")'>
    		<h1>领奖二维码</h1>
    		<p v-if='orderDetail.REWARD_PRICE==0'>到店后请将二维码出示给工作人员完成核验</p>
    		<p v-if='orderDetail.REWARD_PRICE!=0'>到店后请将二维码出示给工作人员完成核验<br />准时到店可获<span>{{orderDetail.REWARD_PRICE}}元</span>工时券</p>
    		<div class="codes">
    			<qrcode :value="orderDetail.VERIFY_QRCODE" :size='145' style=""></qrcode>
    		</div>
        <div class="codeV">
          <span v-for='item in orderDetail.VERIFY_CODE.split("")'>{{item}}</span>
        </div>
    	</div>
    </div>
    <div class="footerBtn">
    	 <div class="btns cancel" v-if='orderDetail.PAY_STATUS==0&&(orderDetail.STATUS==1||orderDetail.STATUS==2)' @click='goCancel'>取消订单</div>
    	<div class="btns settle" v-if='orderDetail.PAY_STATUS==0&&(orderDetail.STATUS==1||orderDetail.STATUS==2)' @click='goPay(orderDetail)'>支付(还剩<span v-if='(Number(downObj.D*24)+Number(downObj.H))>0'>{{Number(downObj.D*24)+Number(downObj.H)}}小时</span>{{Number(downObj.M)}}分{{downObj.S}}秒)</div>
    	<div class="btns settle" v-if='orderDetail.PAY_STATUS==1&&orderDetail.STATUS==3' @click='goComment(orderDetail)'>去评价</div> 
    </div>
  </div>
</template>
<script>
/*智能保养*/
import {XHeader,Qrcode } from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"orderDetail",
  // 数据
  data(){

    return{
    	userId:'',
    	orderId:'', //订单id
    	phone:'',   //平台电话
			orderDetail:'',  //订单详情
			payType: '',
      downObj:{
          D:0,
          H:0,
          M:0,
          S:0
      },
      closeTimes:''  
    }
  },
  // 计算属性
  computed:{
  	watchOrderType(){
  		let orderMess=this.orderDetail;
  		if(orderMess.STATUS==1&&orderMess.PAY_STATUS==0){//待付款
  			return 1;
  		}else if(orderMess.STATUS==2&&orderMess.PAY_STATUS==0){//待付款
  			return 1;
  		}else if(orderMess.STATUS==2&&orderMess.PAY_STATUS==1&&orderMess.EXP_STATUS==0){//待发货
  			return 2;
  		}else if(orderMess.STATUS==2&&orderMess.PAY_STATUS==1&&orderMess.EXP_STATUS==1){
        //待服务，已发货
  			return 3;
  		}else if(orderMess.STATUS==2&&orderMess.PAY_STATUS==1){
        //待服务
  			return 3;
  		}else if(orderMess.STATUS==3&&orderMess.PAY_STATUS==1){
        //待评价
  			return 4;
  		}else if(orderMess.STATUS==4&&orderMess.PAY_STATUS==1){
        //已完成
  			return 5;
  		}
  	}
  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.orderId=this.$route.params.id;
    this.getOrderDetail();
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
  	computedNumPrice(result){
      let arr=result;
      for(let i=0;i<arr.length;i++){
        let num=0;
        let firstClass=arr[i].DETAIL_LIST[0].FIRST_CLASS;
        for(let j=0;j<arr[i].DETAIL_LIST.length;j++){
          let sum=0;
          sum+=Number(arr[i].DETAIL_LIST[j].PRICE);
          num+=Number(arr[i].DETAIL_LIST[j].QUANTITY);
          for(let m=0;m<arr[i].DETAIL_LIST[j].ATTR_LIST.length;m++){
            sum+=Number(arr[i].DETAIL_LIST[j].ATTR_LIST[m].PRICE);
          }
          arr[i].DETAIL_LIST[j].sum=sum;
        }
        arr[i].FIRST_CLASS=firstClass;
        arr[i].num=num;
      }
      // console.log(JSON.stringify(arr));
      return arr;
    },
    goBack(){
      this.$router.replace('/order/0');
    },
    getOrderDetail(){
    	this.$fetchPost('/ServOrderWeb/getOrderDetail.action',{ORDER_ID:this.orderId,USER_ID:this.userId}).then(res=>{
          if(res.STATUS_CODE==1){
						this.phone=res.SERV_PHONE;
            if(res.RESULT_DATA.length>0){
              this.orderDetail=(this.computedNumPrice(res.RESULT_DATA))[0];
              if(this.orderDetail.PAY_STATUS==0){
                this.computerTime(this.orderDetail.AVL_PAY_TIME,this.orderDetail.CLOSE_TIME);
              }
              if(Number(res.RESULT_DATA[0].EXPNO)){
                this.$fetchPost('/Logistics/logisticsRecordByExpNo.action',{EXPNO:res.RESULT_DATA[0].EXPNO}).then(res=>{

                },err=>{});
              }
              
            }else{
              let that=this;
              this.$vux.alert.show({
                // 组件除show外的属性
                title:'订单已取消',
                content:'系统取消了订单，理由是‘超过30分钟未支付’',
                buttonText:'返回订单中心',
                onHide () {
                  that.$router.push('/order/0');
                }
              })
            }
          }
        },err=>{
          console.log(err);
        })
    },
    //取消订单
    goCancel(){
      let that=this;
      this.$vux.confirm.show({
          title:'提示',
          content:'亲，你真的要取消订单',
          onConfirm () {
            that.$fetchPost('/ServOrderWeb/cancelOrder.action',{orderId:that.orderId,USER_ID:that.userId}).then(res=>{
              if(res.STATUS_CODE==1){
                that.$router.replace('/order/2');
              }
            },err=>{
              console.log(err);
            })
          }
      })
    },
    //去支付
    goPay(item){
      // console.log(JSON.stringify(item));
      if(item.FIRST_CLASS==10007||item.FIRST_CLASS==10002){//美容和车品
        this.productCos(item);
      }else if(item.FIRST_CLASS==10003){//喷漆
        this.spray(item);
      }else if(item.FIRST_CLASS==10008){//咖啡
        this.cafe(item);
      }else if(item.FIRST_CLASS==6565){//保养年卡购买
        this.maintainCard(item);
      }else{//保养，违章
        this.mainIllegal(item);
      }
    },
    //美容和车品支付数据的封装
    productCos(item){
      let obj={};
      obj.address=[{}]
      obj.address[0].CONTACT=item.CONTACT;
      obj.address[0].PHONE=item.PHONE;
      obj.address[0].detailAddress=item.ADDRESS;
      obj.ORDER_ID=item.ORDER_ID;
      obj.USER_ID=this.userId;
      obj.selectCars=[{}];
      obj.selectCars[0].LICENCE=item.CAR_NUMBER;
      obj.selectCars[0].BRAND=item.CAR_BRAND_NAME.split('_')[0];
      obj.selectCars[0].SET=item.CAR_BRAND_NAME.split('_')[1];
      obj.selectCars[0].MODEL=item.CAR_BRAND_NAME.split('_')[2];
      obj.VOUCHERS_AMOUNT=item.VOUCHERS_AMOUNT;
      obj.sum=item.TOTAL_PRICE;
      obj.TB_NUM=item.TB_NUM;
      obj.ORDER_LIST=[];
      for(let i=0;i<item.DETAIL_LIST.length;i++){
        let objs={};
        objs.COMP_ID=item.COMP_ID;
        objs.SHOP_NAME=item.SHOP_NAME;
        objs.CASH_VOL_NO=item.VOUCHERS_NO;
        objs.SERV_PARAMS=[];
        let objss={};
        objss.SERV_ID=item.DETAIL_LIST[i].SERV_ID;
        objss.SERV_SUBJECT=item.DETAIL_LIST[i].D_SUBJECT;
        objss.PRICE=item.DETAIL_LIST[i].SINGLE_PRICE;
        objss.QUANTITY=item.DETAIL_LIST[i].QUANTITY;
        objss.SUPP_CASH_VOL=item.DETAIL_LIST[i].SUPP_CASH_VOL;
        objss.SUPP_DIS_VOL=item.DETAIL_LIST[i].SUPP_DIS_VOL;
        objss.SUPP_NOR_CASH_VOL=item.DETAIL_LIST[i].SUPP_NOR_CASH_VOL;
        objss.SERV_FIRST_CLASS=item.DETAIL_LIST[i].FIRST_CLASS;
        objss.SERV_SECON_CLASS=item.DETAIL_LIST[i].SECON_CLASS;  
        objss.MARK=1;
        objss.ATTR_LIST=[];
        for(let j=0;j<item.DETAIL_LIST[i].ATTR_LIST.length;j++){//封装商品属性
          let objsss={};
          objsss.TYPE=item.DETAIL_LIST[i].ATTR_LIST[j].TYPE;
          objsss.ATTRIBURE=item.DETAIL_LIST[i].ATTR_LIST[j].SERV_ID;
          objss.PRICE=Number(objss.PRICE)+Number(item.DETAIL_LIST[i].ATTR_LIST[j].SINGLE_PRICE);
          objss.ATTR_LIST.push(objsss);
        }
        objs.SERV_PARAMS.push(objss);
        obj.ORDER_LIST.push(objs);
      }
      sessionStorage.removeItem('orderMess');
      sessionStorage.removeItem('distribuVoucher');
      //存储支付页面需要的信息 
      sessionStorage.setItem('shopMess',JSON.stringify(obj));
      localStorage.setItem('from','order');//代表车品来自订单
      this.$router.push('/shopPay');
    },
    //喷漆数据的封装
    spray(item){
        let obj={};
        obj.USER_ID=this.userId;
        obj.ORDER_ID=item.ORDER_ID;
        obj.SHOP_NAME=item.SHOP_NAME;
        obj.CAR_NUMBER=JSON.parse( localStorage.getItem("defaultCatAllInfo") ).LICENCE;
        obj.VOUCHERS_AMOUNT=item.VOUCHERS_AMOUNT;
        obj.TB_NUM=item.TB_NUM;
        obj.TOTAL_PRICE=item.TOTAL_PRICE;
        obj.ORDER_LIST=[];
        let objs={};
        objs.COMP_ID=item.COMP_ID;
        objs.CASH_VOL_NO=item.VOUCHERS_NO;
        objs.STARTTIME=item.PREDATE_START;
        objs.ENDTIME=item.PREDATE_END;
        objs.SERV_PARAMS=[];
        for(let i=0;i<item.DETAIL_LIST.length;i++){
          let objss={};
          objss.SERV_ID=item.DETAIL_LIST[i].SERV_ID;
          objss.MT_DETAIL_NAME=item.DETAIL_LIST[i].D_SUBJECT;
          objss.PRICE=item.DETAIL_LIST[i].PRICE;
          objss.QUANTITY=1;
          objss.MARK=0;
          objs.SERV_PARAMS.push(objss);
        }
        obj.ORDER_LIST.push(objs);
        sessionStorage.removeItem('orderMess');
        //存储支付页面需要的信息 
        sessionStorage.setItem('payMess',JSON.stringify(obj));
        localStorage.setItem('fromOrder','spray');
        localStorage.setItem('from','maintain');//代表支付来自钣喷
        this.$router.push('/pay');
    },
    //咖啡支付数据的封装
    cafe(item){
      // localStorage.setItem("orderMess",JSON.stringify(item));
      // localStorage.removeItem("shopOrderMess");
      // //清除上一次选择代金券存储的信息
      // localStorage.removeItem("CASH_VOL_NO");//代金券号
      // localStorage.removeItem("CASH_VOLUME_ID");//代金券的id
      // localStorage.removeItem('voucherMessage');//清除选择代金券存储的代金券信息
      // localStorage.removeItem("fromSelect");//清除来自代金券选择的标识;
      //跳转到4scafe的支付页面
      // if(this.userId){//登录情况下
      //     location.href='http://4Scafe.carnettong.com/4SCAFE/HTML5/aTestWx/dist/index.html?phone='+getCookie('userName');
      // }else{
      //     location.href='http://4Scafe.carnettong.com/4SCAFE/HTML5/aTestWx/dist/index.html'
      // }
      if(this.userId){//登录情况下
          location.href='http://carnt.carnettong.com:8088/4SCAFE/HTML5/aTestWx/dist/index.html?phone='+getCookie('userName');
      }else{
          location.href='http://carnt.carnettong.com:8088/4SCAFE/HTML5/aTestWx/dist/index.html'
      }
    },
    //保养年卡购买数据的封装
    maintainCard(item){
      let obj={};
      obj.USER_ID=this.userId;
      obj.SHOP_NAME=item.SHOP_NAME;
      obj.ORDER_ID=item.ORDER_ID;
      obj.TOTAL_PRICE=item.TOTAL_PRICE;
      obj.ORDER_LIST=[];
      let objs={};
      objs.COMP_ID=item.COMP_ID;
      objs.SERV_PARAMS=[];
      for(let i=0;i<item.DETAIL_LIST.length;i++){
        let objss={};
        objss.SERV_ID=item.DETAIL_LIST[i].SERV_ID;
        objss.MT_DETAIL_NAME=item.DETAIL_LIST[i].D_SUBJECT;
        objss.PRICE=item.DETAIL_LIST[i].PRICE;
        objss.QUANTITY=1;
        objss.MARK=0;
        objs.SERV_PARAMS.push(objss);
      }
      obj.ORDER_LIST.push(objs);
      sessionStorage.removeItem('orderMess');
      // //存储支付页面需要的信息 
      sessionStorage.setItem('payMess',JSON.stringify(obj));
      localStorage.setItem('fromOrder','maintainCard');
      localStorage.setItem('from','maintain');//代表支付来自保养
      this.$router.push('/pay');
    },
    //保养，违章支付数据的封装
    mainIllegal(item){
      if(item.FIRST_CLASS==10001){//保养支付数据，查看接口就能知道数据对应的字段
        let obj={};
        obj.USER_ID=this.userId;
        obj.ORDER_ID=item.ORDER_ID;
        obj.SHOP_NAME=item.SHOP_NAME;
        obj.HOUR_TOTAL_FEE='';
        obj.CAR_NUMBER=item.CAR_NUMBER;
        obj.CAR_BRAND_NAME=item.CAR_BRAND_NAME;
        obj.MILEAGE=item.MILEAGE
        obj.VOUCHERS_AMOUNT=item.VOUCHERS_AMOUNT;
        obj.TB_NUM=item.TB_NUM;
        obj.TOTAL_PRICE=item.TOTAL_PRICE;
        obj.ORDER_LIST=[];
        let objs={};
        objs.COMP_ID=item.COMP_ID;
        objs.CASH_VOL_NO=item.VOUCHERS_NO;
        objs.STARTTIME=item.PREDATE_START;
        objs.ENDTIME=item.PREDATE_END;
        objs.SERV_PARAMS=[];
        for(let i=0;i<item.DETAIL_LIST.length;i++){
          let objss={};
          objss.SERV_ID=item.DETAIL_LIST[i].SERV_ID;
          objss.MT_DETAIL_NAME=item.DETAIL_LIST[i].D_SUBJECT;
          objss.PRICE=item.DETAIL_LIST[i].PRICE;
          objss.QUANTITY=1;
          objss.MARK=0;
          if(item.DETAIL_LIST[i].SERV_ID==0){
            obj.HOUR_TOTAL_FEE=item.DETAIL_LIST[i].PRICE;
          }else{
            objs.SERV_PARAMS.push(objss);
          }
        }
        obj.ORDER_LIST.push(objs);
        sessionStorage.removeItem('orderMess');
        //存储支付页面需要的信息 
        sessionStorage.setItem('payMess',JSON.stringify(obj));
        localStorage.setItem('fromOrder','maitain');
        localStorage.setItem('from','maintain');//代表支付来自保养
        this.$router.push('/pay');
      }else if(item.FIRST_CLASS==709394){
        let obj={}
        obj.COMP_ID=item.COMP_ID;
        obj.QUANTITY=1;
        obj.CAR_NUMBER=item.CAR_NUMBER;
        obj.allPRICE=item.TOTAL_PRICE;
        obj.MOBILE_PHONE=item.USER_PHONE;
        obj.ORDER_ID=item.ORDER_ID;
        obj.TB_NUM=item.TB_NUM;
        obj.SERV_NAME=item.DETAIL_LIST[0].D_SUBJECT;
        obj.SHOP_NAME=item.SHOP_NAME;
        sessionStorage.removeItem('orderMess');
        sessionStorage.setItem('payMess',JSON.stringify(obj));
        localStorage.setItem('fromOrder','illegal');
        localStorage.setItem('from','illegal');//代表支付来自保养
        this.$router.push('/pay');
      }
    },
    // 去评价
    goComment(item){
      localStorage.setItem('commentMess',JSON.stringify(item));
      this.$router.push('/comment/'+item.ORDER_ID);
    },
    //过滤时间
    filterNum(num){
      return num>=10?num:'0'+num;
    },
    // 计算时间
    computerTime(activeTime,closeTime){
      let times=new Date().getTime();//当前时间
      let D,H,M,S;
      let cTime;
      if(activeTime>0){
        cTime=activeTime;
      }else{
        cTime=closeTime;
      }
      let timeNum=cTime-times;
      if(timeNum>=0){
        D=parseInt(timeNum/(24*3600*1000));
        H=parseInt((timeNum-D*24*3600*1000)/(3600*1000));
        M=parseInt((timeNum-D*24*3600*1000-H*3600*1000)/(60*1000));
        S=parseInt((timeNum-D*24*3600*1000-H*3600*1000-M*60*1000)/1000);
      }else{
        D=0;
        H=0;
        M=0;
        S=0;
        clearInterval(this.closeTimes);
        let that=this;
        this.$vux.alert.show({
          // 组件除show外的属性
          title:'订单已取消',
          content:'系统取消了订单，理由是‘超过30分钟未支付’',
          buttonText:'返回订单中心',
          onHide () {
            that.$router.push('/order/0');
          }
        })
      }
      D=this.filterNum(D);
      H=this.filterNum(H);
      M=this.filterNum(M);
      S=this.filterNum(S);
      this.downObj={
        D:D,
        H:H,
        M:M,
        S:S
      }
    }
  },
  // 子组件
  components:{
    XHeader,Qrcode 
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.orderDetail{
  background: #efeff4;
  width: 7.5rem;
  min-height: 100%;
  padding-bottom: 1.1rem;
  .phone{
    width: 0.45rem;
    height: 0.41rem;
  }
  .footerBtn{
  	/* height: 1.03rem; */
  	background: #fff;
  	position: fixed;
  	bottom: 0;
  	width: 7.5rem;
  	display: flex;
  	align-items:center;
  	justify-content:flex-end;
  	.btns{
  		height: 0.70rem;
  		width: 2.4rem;
  		font-size: 0.3rem;
  		line-height: 0.7rem;
  		margin: 0.1rem;
      border-radius: 0.35rem
  	}
  	.cancel{
  		border:1px solid #EC2121;
  		border-radius: 0.35rem;
  		color: #EC2121;
  	}
  	.settle{
  		background: #EC2121;
  		border-radius: 0.35rem;
  		color: #fff;
      width: 3.3rem;
  	}
  }
  .qrCode{
  	width: 7.2rem;
  	background: #fff;
  	margin: 0.2rem auto 0;
  	border-radius: 0.15rem;
  	h1{
  		font-size: 0.34rem;
  		color: #000;
  		line-height: 0.7rem;
      font-weight: 600;
  	}
  	p{
  		width: 70%;
  		margin: 0 auto 0.16rem;
  		font-size: 0.26rem;
  		color: #666;
  	}
  	.codes{
  		margin: 0 auto;
  		padding: 5px 5px 0 5px;
      
      
  	}
    .codeV{
      display: flex;
      justify-content:center;
      margin-top: -0.15rem;
      span{
        display: inline-block;
        font-size: 0.35rem;
        color: #000!important;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  	.codeType1{
  		padding-bottom: 0.3rem;
      span{
        color: #ec2121;
      }
  	}
  }
  .detail{
  	width: 7.2rem;
  	margin: 0 auto;
  	padding-top: 0.2rem;
    .orderType1{
      height: 1.6rem;
      background: url(../../assets/image/order/bg.png);
      background-size: 100% 100%;
      position: relative;
      .inner{
        position: absolute;
        line-height: 0.5rem;
        height: 0.5rem;
        width: 100%;
        top: 0.6rem;
        left: 0;
        text-align: left;
        font-size: 0.29rem;
        color: #fff;
        img{
          vertical-align: middle;
          width: 0.5rem;
          height: 0.5rem;
          margin: 0 0.2rem 0 0.3rem; 
        }
      }
    }
  	.orderType{
  		height: 1.8rem;
  		background: #fff;
  		border-radius: 0.15rem;
  		padding: 0 0.35rem;
  		display: flex;
  		align-items:center;
  		justify-content:space-bwtween;
  		.type{
  			.typeTop{
  				display: flex;
  				align-items:center;
				.typeLogo{
					width: 0.68rem;
					height: 0.68rem;
				}
				.typeLine{
					width: 0.74rem;
					height: 0.03rem;
				}
  			}
  			.typeBot{
  				margin-top: 0.15rem;
  				text-align: center;
  				font-size: 0.26rem;
  			}
  			.text1{
  				padding-left: 0.06rem;
  			}
  			.text2{
  				padding-left: 0.6rem;
  			}
  			.text3{
  				padding-left: 0.63rem;
  			}
  			.text4{
  				padding-left: 0.63rem;
  			}
  			.text5{
  				padding-left: 0.3rem;
  				margin-right: -0.4rem;
  			}
  		}
  		.firstType{
  			width: 0.7rem;
  		}
  	}
  	.carMess{
  		margin-top: 0.2rem;
  		padding:0 0.2rem;
  		background: #fff;
  		border-radius: 0.15rem;
  		display: flex;
  		height: 1.4rem;
  		align-items:center;
  		img{
  			width: 0.90rem;
  			height: 0.77rem;
  		}
  		.carDetailMess{
  			text-align: left;
  			padding-left: 0.2rem;
  			h1{
  				font-size: 0.3rem;
  				color: #000;
          margin-bottom: 0.1rem;
  			}
  			p{
				font-size: 0.26rem;
				color: #444;
				padding-top: 0.1rem;
  			}
  		}
  	}
  	.address{
  		margin-top: 0.2rem;
  		padding:0 0.2rem;
  		background: #fff;
  		border-radius: 0.15rem;
  		p{
  			display: flex;
  			height: 0.6rem;
  			padding: 0 0.1rem;
  			align-items:center;
  			justify-content:space-between;
  			span{
  				font-size: 0.28rem;
  			}
  			label{
  				font-size: 0.25rem;
  			}
  		}
  		.detailAddress{
  			display: flex;
  			align-items:center;
  			height: 0.6rem;
  			img{
  				width: 0.4rem;
  				height: 0.4rem;
  				margin-right: 0.1rem;
  			}
  			span{
  				font-size: 0.24rem;
  				color:#666;
  			}
  		}
  	}
  	.orderMess{
      margin-top: 0.2rem;
  		h1{
  			font-size: 0.28rem;
  			color: #333;
  			height: 0.8rem;
  			line-height: 0.8rem;
  			text-align: left;
  			padding-left: 0.3rem;
  		}
  		.MessDetail{
  			border-radius: 0.15rem;
  			background: #fff;
        padding: 0 0.2rem;
  			.items{
  				display: flex;
  				align-items:center;
	  		    justify-content:space-between;
	  		    height:0.8rem;
  				h2{
  					font-size: 0.3rem;
  					color: #666;
  				}
  				p{
  					font-size: 0.28rem;
  					color: #000;
  					font-weight: 550;
  				}
  			}
  			.orderTime{
  				.borderBFu(#DADADA);
  			}
  		}
  	}
  	.allShop{
      margin-top: 0.2rem;
      border-radius: 0.15rem;
      background: #fff;
  		.noVoucher{
  			height: 0.8rem;
  			text-align: right;
  			font-size: 0.34rem;
  			background: #fff;
  			border-bottom-right-radius: 0.15rem;
        border-bottom-left-radius: 0.15rem;
  			padding-right: 0.3rem;
  			line-height: 0.8rem;
        span{
          color: #ec2121;
        }
        h2{
          font-size: 0.26rem;
              color: #EC2121;
              padding: 0rem 0;
            label{
              font-size: 0.26rem;
            }
            span{
              font-size: 0.26rem;
            }
            em{
              font-size: 0.26rem;
              font-style: normal;
            }
          }
  		}
  		.voucherMess{
  			border-bottom-right-radius: 0.15rem;
        border-bottom-left-radius: 0.15rem;
	  		display: flex;
	  		align-items:center;
	  		justify-content:space-between;
	  		background: #fff;
	  		height: 2.06rem;
	  		padding: 0 0.2rem;
	  		.voucherLogo{
	  			display: flex;
		  		align-items:center;
	  			img{
		  			width: 0.6rem;
		  			height: 0.6rem;
		  		}
		  		span{
		  			font-size: 0.3rem;
		  			color: #000;
		  			margin-left: 0.1rem;
		  		}
	  		}
	  		.voucherNum{
	  			padding-right: 0.2rem;
	  			text-align: right;
	  			p{
	  				color: #333;
	  				font-size: 0.26rem;
	  				padding: 0.2rem 0;
	  				label{
						font-size: 0.24rem;
	  				}
	  				span{
						font-size: 0.3rem;
	  				}
	  				em{
						font-size: 0.24rem;
						font-style: normal;
	  				}
	  			}
	  			h2{
					font-size: 0.26rem;
	  				color: #EC2121;
	  				padding: 0.1rem 0;
	  				label{
						font-size: 0.26rem;
	  				}
	  				span{
						font-size: 0.34rem;
	  				}
	  				em{
						font-size: 0.26rem;
						font-style: normal;
	  				}
	  			}
	  			h3{
	  				font-size: 0.3rem;
	  				color: #000;
            font-weight: normal;
	  				padding: 0.1rem 0;
	  			}
	  		}
	  	}
  		h1{
  			font-size: 0.28rem;
  			color: #333;
  			height: 0.8rem;
  			line-height: 0.8rem;
  			text-align: left;
  			padding-left: 0.3rem;
  		}
  		.shopDetail1{
  			display: flex;
  			align-items:center;
  			background: #fff;
  			padding: 0.2rem 0rem 0.2rem 0rem;
        margin: 0 0.2rem;
  			justify-content:space-between;
  			.borderBFu(#DADADA);
  			.shopDetailLeft{
  				img{
  					width: 1.7rem;
  					display: block;
  					height: 1.4rem;
  				}
  			}
  			.showDetailRight{
  				width: 70%;
  				.detailTop{
  					display: flex;
  					justify-content:space-between;
  					margin-bottom: 0.5rem;
  					p{
  						font-size: 0.3rem;
              text-align: left;
  					}
  					span{
  						font-size: 0.3rem;
  					}
  				}
  				h3{
  					font-size: 0.3rem;
  					text-align: left;
            font-weight: normal;
  				}
  			}
  		}
  		.shopDetail{
  			height:0.8rem;
  			display: flex;
  			align-items:center;
  			background: #fff;
  			padding: 0;
        margin: 0 0.2rem;
  			justify-content:space-between;
  			.borderBFu(#DADADA);
  			h2{
  				font-size: 0.26rem;
  				color: #666;
  			}
  			p{
  				font-size: 0.25rem;
  				color: #666;
  				span{
  					margin-right: 0.3rem;
  				}
  			}
  		}
  		.borderR{
			border-top-left-radius: 0.15rem;
  			border-top-right-radius: 0.15rem;
  		}
  	}
  }
}
.paddBottom{
  padding-bottom: 0.2rem;
}
</style>